<template>
    <div>

        <div class="Ivstandard PageWidth show-pc ">

            <div class="title">
                <!-- <div class="title_lift">{{ labelName }}</div>
                <div class="title_right">
                    <div>排序：全部</div>
                    <div>热门下载</div>
                    <div>最新上传</div>
                </div> -->
            </div>
            <div class="WaterfallFlow">
                <!-- <div class="LeftNavigation">
                    <div class="Left_title">
                        <div class="text">全部</div>
                        <div class="jiantou"><img src="../../assets/images/new_img/箭头.png" alt=""></div>
                    </div>
                    <div style=" margin-top: 25px;">
                        <div class="Select" v-for="item in SelectList" :key="item.title"
                            :class="{ 'selected': selectedItem === item.type }" @click="selectItem(item.type)">
                            <div class="Select_png"><img :src="iconEnum[item.type]" :alt="item.title"></div>
                            <div class="Select_text">
                                {{ item.title }}
                            </div>
                        </div>
                    </div>
                </div> -->
                
                <div class="WaterfallFlow_item">
                    <Waterfall :col="3" :data-source="list">
                        <template #default="{ item }">
                            <Card :item />
                        </template>
                    </Waterfall>
                </div>

            </div>
        </div>

        <div class="show-wap">
            <div class="title-wap">
                <div class="title_lift-wap">{{ labelName }}</div>



                <div class="LeftNavigation-wap">
                    <div class="scroll-container">
                
                        <div class="Select-box">
                            <div class="text-wap">全部:</div>

                            <div class="Select-wap" v-for="item in SelectList" :key="item.title"
                                :class="{ 'selected-wap': selectedItem === item.type }" @click="selectItem(item.type)">
                                <div class="Select_png-wap"><img :src="iconEnum[item.type]" :alt="item.title"></div>
                                <div class="Select_text-wap">
                                    {{ item.title }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="title_right-wap">
                <div>排序：全部</div>
                <div>热门下载</div>
                <div>最新上传</div>
            </div>
            <div class="WaterfallFlow_item-wap">
                <Waterfall :col="3" :data-source="list">
                    <template #default="{ item }">
                        <Card :item />
                    </template>
                </Waterfall>
            </div>
        </div>

    </div>
</template>

<script setup>

import Waterfall from '@/components/Waterfall/index.vue'
import Img_1 from '../../assets/images/new_img/图形.png'
import Img_2 from '../../assets/images/new_img/色彩库.png'
import Img_3 from '../../assets/images/new_img/辅助图形.png'

import img_1 from "../../assets/images/local_img/img_1.png"
import img_2 from "../../assets/images/local_img/img_2.png"
import img_3 from "../../assets/images/local_img/img_3.png"
import img_4 from "../../assets/images/local_img/img_4.png"
import img_5 from "../../assets/images/local_img/img_5.png"
import img_6 from "../../assets/images/local_img/img_6.png"
import img_7 from "../../assets/images/local_img/img_7.png"
import img_8 from "../../assets/images/local_img/img_8.png"
import img_9 from "../../assets/images/local_img/img_9.png"
import img_10 from "../../assets/images/local_img/img_10.png"
import { useStore } from '@/store'
const { themeStore } = useStore()

import { ref, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router';


const route = useRoute();

const labelName = ref('');
const selectedItem = ref(null)
const selectItem = (type) => {
    selectedItem.value = type
}




// watch(() => {
//         console.log( themeStore.searcShow.key);
        
//     labelName.value = themeStore.searcShow.title

// });






const iconEnum = ref({
    1: Img_1,
    2: Img_2,
    3: Img_3,
    4: Img_1,
    5: Img_2,
    6: Img_3
})

const SelectList = ref([
    {

        type: 1,
        title: "LOGO",

    },
    {
        type: 2,
        title: "色彩",

    },
    {
        type: 3,
        title: "辅助图形",

    },
    {

        type: 4,
        title: "LOGO",

    },
    {
        type: 5,
        title: "色彩",

    },
    {
        type: 6,
        title: "辅助图形",

    },



])




const list = ref([
    {
        imgurl: img_8,
        text: "图片4",
        name: "作家"
    }, {
        imgurl: img_10,
        text: "图片5",
        name: "作家"
    }, {
        imgurl: img_6,
        text: "图片2",
        name: "作家"
    },{
        imgurl: img_2,
        text: "图片2",
        name: "作家"
    }, {
        imgurl: img_4,
        text: "图片3",
        name: "作家"
    },
    {
        imgurl: img_3,
        text: "图片5",
        name: "作家"
    },
    {
        imgurl: img_8,
        text: "图片4",
        name: "作家"
    }, {
        imgurl: img_10,
        text: "图片5",
        name: "作家"
    },
    {
        imgurl: img_2,
        text: "档期活动物料",
        name: "作家sss"
    }, {
        imgurl: img_5,
        text: "图片2",
        name: "作家"
    }, {
        imgurl: img_7,
        text: "图片3",
        name: "作家"
    }, {
        imgurl: img_9,
        text: "图片3",
        name: "作家"
    }, {
        imgurl: img_10,
        text: "图片4",
        name: "作家"
    }, {
        imgurl: img_1,
        text: "图片5",
        name: "作家"
    }, {
        imgurl: img_2,
        text: "图片2",
        name: "作家"
    }, {
        imgurl: img_4,
        text: "图片3",
        name: "作家"
    }, {
        imgurl: img_8,
        text: "图片4",
        name: "作家"
    }, {
        imgurl: img_6,
        text: "图片2",
        name: "作家"
    }, {
        imgurl: img_9,
        text: "图片3",
        name: "作家"
    },
    
    
])


</script>

<style lang="less" scoped>
.Ivstandard {
    

    margin: 0 auto;
    margin-top: 40px;


    .title {
        width: 100%;
        height: 50px;

        display: flex;
        justify-content: space-between;
        line-height: 50px;

        .title_lift {

            height: 1.14vw;
            font-family: MicrosoftYaHei-Bold;
            font-size: 1.14vw;
            color: var(--color-text);
        }



        .title_right {

            display: flex;
            justify-content: space-around;
            gap: 20px;
            font-size: 0.83vw;
            color: var(--color-text);
        }
    }



    .WaterfallFlow {
        display: flex;
        justify-content: space-around;
     

        .LeftNavigation {
            width: 13vw;
            height: 100vw;
            margin-top: 17px;
            box-shadow: 15px 0 20px -15px rgba(120, 120, 120, 0.2),
                -15px 0 20px -15px rgba(120, 120, 120, 0.2);
            border-radius: 4px;

            .Left_title {
                width: 100%;
                height: 1.97vw;
                background-color: rgb(235, 235, 235);
                display: flex;
                justify-content: space-between;
                font-size: var(--text-16);
                line-height:  1.97vw;
                border-radius: 2px;
                color: rgb(22, 22, 22);
     

                .text {
                    width: 20%;
                    text-align: center;
                    font-size: 0.83vw;
                    margin-left: 10px;
                }

                .jiantou {
                    width: 20%;
                    text-align: center;
                    margin-right: 10px;

                    >img {
                        width: 1vw;
                        height: 0.53vw;
                    }
                }
            }

            .Select {
                width: 100%;
                height: 1.97vw;
                display: flex;
                align-items: center;
                padding-left: 14px;
                font-size: 16px;
                color: var(--color-text);

                .Select_png {
                    width: auto;

                    >img {
                        width: 0.9vw;
                        height: 0.8vw;
                    }
                }

                .Select_text {
                    width: auto;
                    margin-left: 14px;
                    font-size: var(--text-14);
                
                }

            }




        }

        .WaterfallFlow_item {
            flex: 1;
            margin-left: 20px;
            margin-top: 17px;

        }


    }

}

.Select.selected {
    background-color: rgb(235, 235, 235);

}

.Select.selected .Select_text {
    color: black;
}

// 手机样式
.show-wap {
    width: 95%;
    margin: 0 auto;

    .title-wap {
        width: 100%;
        height: 50px;
        display: flex;
        text-align: 50px;
        align-content: center;
        align-items: center;
        gap: 10px;



        .title_lift-wap {
            flex: 1;
            font-family: MicrosoftYaHei-Bold;
            font-size: 18px;
            color: var(--color-text);

            /* 新增的关键属性 */
            white-space: nowrap;
            /* 禁止文字换行 */

            box-sizing: border-box;
        }




        .LeftNavigation-wap {
            width: 80%;
            font-size: 16px;
            color: var(--color-text);

            .scroll-container {
                width: 100%;
                overflow-x: auto;
                white-space: nowrap;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
                display: flex;
                gap: 10px;
                justify-content: center;
                align-items: center;

                &::-webkit-scrollbar {
                    display: none;
                }

                .text-wap {
                    margin-left: 220px;
                    margin-bottom: 10px;
                }

                .Select-box {
                    width: 100%;

                    display: flex;
                    gap: 10px;
                    justify-content: center;
                    align-items: center;
                    margin-top: 10px;
                    padding: 0px 16px;

                    .Select-wap {
                        display: flex;
                        gap: 10px;
                        position: relative;

                        padding-bottom: 8px;

                        .Select_png-wap {
                            width: 15px;
                            height: 15px;
                        }

                    }
                }

            }
        }

    }



    /* 选中状态样式 */
    .Select-wap.selected-wap .Select_text-wap {

        color: #e9e4e4;
    }

    .Select-wap.selected-wap::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        height: 2px;
        background-color: #e9e4e4;
    }

    .title_right-wap {
        display: flex;
        // justify-content: space-around;
        gap: 10px;
        font-size: 14px;
        color: var(--color-text);
    }

    .WaterfallFlow_item-wap {
        flex: 1;
        // margin-left: 20px;
        margin-top: 17px;
        padding-bottom: 80px;

    }
}
</style>